<template>
  <button
    :class="cn('cg-button', buttonVariants({ variant, size }), props.class)"
    :style="props.style"
  >
    <svg-icon v-if="iconConfig" :icon-name="iconConfig.name" :icon-color="iconConfig.color" />
    <slot></slot>
  </button>
</template>
<script setup lang="ts">
import { computed } from 'vue'
import type { HTMLAttributes } from 'vue'
import { cn } from '../../lib/utils'
import { type ButtonVariants, buttonVariants } from './tools'

defineOptions({
  name: 'cg-button'
})

interface Props {
  variant?: ButtonVariants['variant']
  size?: ButtonVariants['size']
  class?: HTMLAttributes['class']
  style?: HTMLAttributes['style']
  icon?: any
}

const props = withDefaults(defineProps<Props>(), {})

const iconConfig = computed(() => {
  if (typeof props.icon === 'string') {
    return {
      name: props.icon
    }
  }

  if (typeof props.icon === 'object') {
    return props.icon
  }

  return undefined
})
</script>
